<template>
  <el-card class="el_card">
    <div class="title">{{ item.frontName }}</div>
    <div class="detail_list">
      <div class="detail_item" v-for="item in categoryItems.itemList" :key="item.id">
        <img class="big_img" :src="item.listPicUrl" alt="">
        <div class="name">
          <img class="preLogo" :src="item.preLogo[0]?.logoUrl" alt="" style="height: 0.3rem;">{{ item.name }}
        </div>
        <div class="price">
          <span>
            <span>
              <div class="red_packet" v-if="item.itemTagList[0]?.name"><img style="width: 10px; height: 10px;"
                  src="https://yanxuan.nosdn.127.net/static-union/166909947513c0c8.png" alt="">{{
                    item.itemTagList[0]?.name }}</div>
              <span class="prefix">{{ item.finalPriceInfoVO?.priceInfo?.finalPrice?.prefix }}</span>
              <span style="color: rgb(250, 30, 50); font-weight: bold;">
                <span style="font-size: 12px;">¥</span>
                <span style="font-size: 20px;">{{ item.retailPrice }}</span>
              </span>
              <span class="suffix"></span>
            </span>
            <span style="color: rgb(153, 153, 153); font-weight: 300; margin-left: 0.04rem;">
              <span style="text-decoration: line-through;;font-size: 12px;">¥</span>
              <span style="text-decoration: line-through; font-size: 12px;">{{ item.sortOriginPrice }}</span>
            </span>
            <span style="display: flex; font-size: 12px;background: rgba(255, 233, 235); height: 20px;">
              <div class="banner_title"
                style="color:white; font-weight: bold; background:red;border-top-right-radius: 20%; border-top-left-radius:20%;border-bottom-left-radius:20%;border-bottom-right-radius:20%;">
                {{ item.finalPriceInfoVO?.banner?.title }}</div>
              <div class="banner_content" style="color: red; margin-left: 5px;">{{
                item.finalPriceInfoVO?.banner?.content }}</div>
            </span>
          </span>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import { type AnyObject } from '@/api/sort';
let props = defineProps<{
  item: AnyObject,
  categoryItems: AnyObject
}>()
</script>
  
<style lang="less" scoped>
.el_card {
  width: 100%;
  margin-top: 10px;

  .title {
    width: 100%;
    height: 55px;
    line-height: 55px;
    font-size: 14px;
    text-align: center;
  }

  .detail_list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .detail_item {
      width: 48%;
      // height: 302px;
      display: flex;
      flex-direction: column;

      .big_img {
        width: 100%;
      }

      .name {
        width: 100%;
        font-size: 14px;
      }

      .prefix {
        font-size: 12px;
        color: #FA1E32;
      }

      .red_packet {
        font-size: 12px;
        border: 1px solid #c1bdbd;
        width: 66px;
      }
    }
  }
}
</style>